import {Outlet} from "react-router-dom";
import {Layout, Spin} from 'antd';
import styles from './MainLayout.module.scss'
import {Logo} from "../components/Logo";
import {UserInfo} from "../components/UserInfo";
import useLoadUserData from "../hooks/useLoadUserData";
import useNavPage from "../hooks/useNavPage";

const {Header, Footer, Content} = Layout;

export function MainLayout() {
    const {waitingUserData} = useLoadUserData()
    useNavPage(waitingUserData)
    return (
        <Layout>
            <Header className={styles.header}>
                <div>
                    <Logo></Logo>
                </div>
                <div>
                    <UserInfo></UserInfo>
                </div>
            </Header>
            <Content className={styles.main}>
                {waitingUserData ? <div style={{textAlign: 'center', marginTop: 100}}>
                    <Spin/>
                </div> : <Outlet></Outlet>}
            </Content>
            <Footer className={styles.footer}>
                小慕问卷 &copy; 2024 - present. Created by 大梦想家
            </Footer>
        </Layout>
    );
}